<script setup>
import { reactive, toRefs, ref } from 'vue';
import { CloseBold } from '@element-plus/icons-vue';
import { ElDialog, ElForm, ElFormItem, ElIcon, ElInput, ElMessage } from 'element-plus';
import { isSymbol, isSymbolTxt } from '@/common/common-helper';
import { useCommonStore } from '../../stores/index';

const storeCommon = useCommonStore();

const props = defineProps({
  passShow: Boolean,
});
const { passShow } = toRefs(props);
const emit = defineEmits(['handleOpenChangeShow']);
const formRef = ref(null);

const changePassword = reactive({
  oldPassword1: '',
  oldPassword: '',
  newPassword: '',
  checkPass: '',
});

//验证旧密码
const validatePassOld = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('旧密码不能为空'));
  }
};

//验证新密码

const validatePass = (rule, value, callback) => {
  const passVal = /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{6,12}$/; //密码必须是6~12、必须含有字母、数字

  if (value === '') {
    callback(new Error('请输入密码'));
  } else if (!passVal.test(value)) {
    callback(new Error('密码必须是6~12位、必须含有字母和数字'));
  } else {
    if (changePassword.checkPass !== '') {
      if (!changePassword.value) return;
      changePassword.value.validateField('checkPass', () => null);
    }

    callback();
  }
};

//再次验证新密码

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('密码不能为空，请重新输入'));
  } else if (value !== changePassword.newPassword) {
    callback(new Error('两次输入密码不相等，请重新输入'));
  } else {
    callback();
  }
};

const rules = reactive({
  oldPassword: [{ validator: validatePassOld, trigger: 'blur', required: true }],
  newPassword: [
    { validator: validatePass, trigger: 'blur', required: true },
    { min: 6, max: 15, message: '长度在 6 到 12 个字符', trigger: 'blur' },
  ],
  checkPass: [{ validator: validatePass2, trigger: 'blur', required: true }],
});

const closeBoxShowDialog = () => {
  formRef.value.resetFields();
  storeCommon.SET_ACTIVE_PERSONAL_SHOW(true);
  emit('handleOpenChangeShow', 'pass');
};

const handleSubmitForm = () => {
  if (!changePassword.checkPass || !changePassword.newPassword || !changePassword.oldPassword) {
    ElMessage({
      message: `请填写要修改的密码信息`,
      type: 'warning',
    });

    return;
  }

  if (isSymbol(changePassword.newPassword) || isSymbol(changePassword.oldPassword)) {
    ElMessage({
      type: 'warning',
      message: `不能添加特殊符号，请按要求重新输入`,
    });

    return;
  }

  if (isSymbolTxt(changePassword.newPassword) || isSymbolTxt(changePassword.oldPassword)) {
    ElMessage({
      type: 'warning',
      message: `不能填写汉子，请按要求重新输入`,
    });

    return;
  }

  if (changePassword.newPassword === changePassword.oldPassword) {
    ElMessage({
      type: 'warning',
      message: `新密码和旧密码一致，请重新设置`,
    });

    return;
  }

  if (changePassword.newPassword !== changePassword.checkPass) {
    ElMessage({
      type: 'warning',
      message: `两次输入密码不相等，请重新输入`,
    });

    return;
  }

  const passVal = /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{6,12}$/; //密码必须是6~12、必须含有字母、数字

  if (!passVal.test(changePassword.newPassword)) {
    ElMessage({
      type: 'warning',
      message: `密码没有按照要求设置,请输入6~12位、其中必须含有字母和数字`,
    });

    return;
  }
};
</script>

<template>
  <div class="change_phone_root">
    <ElDialog
      v-if="passShow"
      v-model="passShow"
      :append-to-body="false"
      :close-on-click-modal="false"
      destroy-on-close
      :show-close="false"
      :align-center="true"
    >
      <template #header>
        <div class="my-header">
          <div class="dialog-title">修改密码</div>
          <div class="dialog-close" @click="closeBoxShowDialog()">
            <ElIcon color="#333333">
              <CloseBold />
            </ElIcon>
          </div>
        </div>
      </template>
      <main>
        <div class="change_password">
          <ElForm
            ref="formRef"
            :model="changePassword"
            :rules="rules"
            status-icon
            label-width="110px"
            class="demo-ruleForm"
          >
            <ElFormItem label="旧密码：" prop="oldPassword">
              <ElInput v-model.trim="changePassword.oldPassword1" show-password style="display: none" clearable />
              <ElInput
                v-model.trim="changePassword.oldPassword"
                type="password"
                readonly
                onfocus="this.removeAttribute('readonly');this.type='password'"
                autocomplete="new-password"
                show-password
                clearable
              ></ElInput>
            </ElFormItem>
            <ElFormItem label="新密码：" prop="newPassword">
              <ElInput v-model.trim="changePassword.newPassword" type="password" show-password clearable> </ElInput>
            </ElFormItem>
            <ElFormItem label="确认新密码：" prop="checkPass">
              <ElInput v-model.trim="changePassword.checkPass" type="password" show-password clearable></ElInput>
            </ElFormItem>
          </ElForm>
        </div>
      </main>

      <div class="dialog-footer">
        <div @click="closeBoxShowDialog()">取消</div>
        <div @click="handleSubmitForm()">确定</div>
      </div>
    </ElDialog>
  </div>
</template>

<style scoped lang="scss">
.change_phone_root {
  :deep(.el-dialog) {
    width: 770px;
    height: 466px;
    border-radius: 10px;
  }

  :deep(.el-dialog__header) {
    padding: 0 !important;
  }

  .my-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    padding-left: 32px;
    color: #333333;
    border-bottom: 1px solid #f8f8f8;

    .dialog-title {
      font-size: 18px;
      font-family: Source Han Sans CN;
    }

    .dialog-close {
      cursor: pointer;
    }
  }
  .dialog-footer {
    position: absolute;
    right: 20px;
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 108px;
      height: 40px;
      font-size: 16px;
      font-family: Source Han Sans CN, Source Han Sans CN-Normal;
      border: 1px solid #00ad93;
      border-radius: 6px;
      cursor: pointer;

      &:first-child {
        margin-right: 20px;
        color: #00ad93;
      }

      &:nth-child(2) {
        color: #ffffff;
        background: #00ad93;
      }
    }
  }
}
</style>
